<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>组件初步</p>
    <p>1.有且只有一个根元素</p>
    <p>2.组件中的data必须是一个带有返回值的函数，在组件复用时，数据应该彼此独立互不影响。如果写成对象，在复用时就是浅拷贝，数据将会公用。</p>
    <p>3.组件名不要和已有的标签名冲突，不然会报错。可以加上v的前缀，在js中使用小驼峰，在html中使用中划线</p>
    <v-div></v-div>
    <v-div></v-div>
    <v-div></v-div>
    <v-div></v-div>
    <hr>
    <button @click="num ++">{{num}}</button>
    <button @click="num ++">{{num}}</button>
    <button @click="num ++">{{num}}</button>
    <button @click="num ++">{{num}}</button>
  </div>
  <script src="../vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        num: 1
      },
      // 局部注册组件——组件就是可复用的vue实例
      components: {
        'vDiv': {
          template: 
          `
            <div>
              <h1>{{msg}}我是第一个组件</h1>
              <button @click="num ++">click----{{num}}</button>
            </div>
          `,
          data() {
            return {
              msg: '你好！',
              num: 1
            }
          }
        }
      }
    })
  </script>
</body>
</html>